<template>
  <Row justify="center">
    <Avatar @click="modifyAvatarClick" class="avatar" :src="avatarSrc">
    </Avatar>
  </Row>
  <Row justify="center">
    <Col span="8">
      <Form ref="myInfoForm" :model="myInfo" :rules="{}" :label-width="100">
        <FormItem label="用户名" prop="userName">
          <Input readonly v-model="myInfo.userName"/>
        </FormItem>
        <FormItem label="真实姓名" prop="realName">
          <Input v-model="myInfo.realName"/>
        </FormItem>
        <FormItem label="昵称" prop="nickName">
          <Input v-model="myInfo.nickName"/>
        </FormItem>
        <FormItem label="身份证号" prop="idNumber">
          <Input v-model="myInfo.idNumber"/>
        </FormItem>
        <FormItem label="性别" prop="sex">
          <DictSelect v-model="myInfo.sex" dictCode="Sex:Secrecy"/>
        </FormItem>
        <FormItem label="手机号" prop="phone">
          <Input v-model="myInfo.phone"/>
        </FormItem>
        <FormItem label="邮箱" prop="email">
          <Input v-model="myInfo.email"/>
        </FormItem>
        <FormItem label="出生日期" prop="birthDate">
          <DatePicker type="date" format="yyyy-MM-dd" v-model="myInfo.birthDate"/>
        </FormItem>
        <FormItem class="form-bottom-btn">
          <Button @click="saveBtnClick" type="primary">保存</Button>
          <Button @click="modifyPasswordBtnClick" type="primary">修改密码</Button>
        </FormItem>
      </Form>
    </Col>
  </Row>
  <ModifyMyPassword ref="modifyMyPassword"/>
</template>

<script>
import {getCurrUser, updateCurr, updateCurrUserAvatar} from "@/api/sys/user";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Input, Message} from "view-ui-plus";
import XEUtils from "xe-utils";
import ModifyMyPassword from "./ModifyMyPassword.vue"
import {getFile} from "@/util";

export default {
  name: "MyInfo",
  components: {Input, ModifyMyPassword},
  data() {
    return {
      avatarSrc: '',
      myInfo: {},
    }
  },
  created() {
    getCurrUser().then(res => {
      if (res.code != RESPONSE_CODE_SUCCESS) {
        return
      }
      this.myInfo = res.data
      let avatarUrl = this.myInfo.avatarUrl;
      if (avatarUrl && avatarUrl !== '') {
        this.avatarSrc = this.$fileBaseUrl + avatarUrl
      } else {
        this.avatarSrc = this.$webBaseUrl + "/system/myInfo/defaultAvatar.png"
      }
    })
  },
  methods: {
    modifyAvatarClick() {
      getFile('.jpg,.jpeg,.png').then(res => {
        let formData = new FormData()
        formData.append("avatar", res);
        updateCurrUserAvatar(formData).then(res => {
          if (res.code !== RESPONSE_CODE_SUCCESS) {
            return
          }
          this.avatarSrc = this.$fileBaseUrl + res.data
          Message.success("修改成功")
        })
      })
    },
    modifyPasswordBtnClick() {
      this.$refs.modifyMyPassword.show()
    },
    saveBtnClick() {
      this.$refs.myInfoForm.validate((valid) => {
        if (!valid) {
          return
        }
        let saveData = this.$utils.clone(this.myInfo)
        if (saveData.birthDate) {
          saveData.birthDate = XEUtils.toDateString(saveData.birthDate, 'yyyy-MM-dd')
        }
        updateCurr(saveData).then(res => {
          if (res.code == RESPONSE_CODE_SUCCESS) {
            Message.success("保存成功")
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.form-bottom-btn {
  .ivu-form-item-content {
    justify-content: flex-start;
  }
}

.avatar {
  width: 100px;
  height: 100px;
  margin: 20px;
}

</style>
